<!--
 * @Author: your name
 * @Date: 2020-12-17 19:14:17
 * @LastEditTime: 2021-05-16 20:12:24
 * @LastEditors: Please set LastEditors
 * @Description: 备货通知根据原单生成功能,返回的数据 为
 * @FilePath: \cang-chu-guan-li-xi-tong\src\views\chukuguanli\BeiHuoTongZhiOrderOrigin.vue
-->
<template>
  <div>
    <a-button type="primary" style="margin-top: 20px" @click="showModal">
      <a-icon type="plus" />
      根据源单生成
    </a-button>

    <a-modal
      title="销售订单生成备货通知"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      width="70%"
    >
      <!-- 搜索表单---查询条件 -->
      <a-form v-bind="layout">
        <a-row>
          <!-- 销售订单显示 -->
          <!-- <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item label="销售部门">
              <a-select
                showSearch
                style="width: 100%"
                @change="DepartmentChange"
                v-model="searchForm.salesDepartment"
              >
                <a-select-option
                  v-for="item in saleDepartmentList"
                  :key="item.value"
                  :value="item.title"
                  >{{ item.title }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col> -->
          <!-- 公共部分 -->
          <a-col :xl="10" :lg="10" :md="12" :sm="24" :xs="24">
            <a-form-item label="时间段">
              <a-range-picker
                v-model="searchForm.rangeDate"
                @change="getRangeTime"
              />
            </a-form-item>
          </a-col>

          <!-- 按钮 -->
          <a-col
            :xl="14"
            :lg="14"
            :md="24"
            :sm="24"
            :xs="24"
            :style="{ textAlign: 'right' }"
            ><div style="margin-top: 10px">
              <a-button type="primary" @click="Search()">查询</a-button>
              <a-button style="margin-left: 8px" @click="Reset()"
                >重置</a-button
              >
            </div>
          </a-col>
        </a-row>
        <a-row> </a-row>
      </a-form>

      <a-divider />

      <!-- 备货通知单、销售订单等单据 -->
      <a-table
        style="margin-top: 20px"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
        :row-selection="{
          selectedRowKeys: orderSelectedRowKeys,
          onChange: orderSelectChange,
          type: 'radio',
        }"
        :scroll="{ x: 1300 }"
      >
        <template slot="options" slot-scope="text, record">
          <a @click="closeOrder(record.id)"> 关闭订单 </a>
        </template>
      </a-table>

      <a-divider />
      <!-- 单据中的物品 -->
      <a-table
        style="margin-top: 10px"
        :columns="listColumns"
        :data-source="listDataSource"
        :scroll="{ x: 1500 }"
      >
        <template slot="options" slot-scope="text, record">
          <a @click="closeGoods(record.id)"> 关闭订单 </a>
        </template>
      </a-table>

      <!-- 备货通知单物品信息   :row-selection="{
          selectedRowKeys: listSelectedRowKeys,
          onChange: listSelectChange,
        }"-->
    </a-modal>
  </div>
</template>

<script>
import { CommonAjax } from "@/services/modules/common";
const comHttp = new CommonAjax(); // 公用接口

const columns = [
  {
    title: "序号",
    dataIndex: "key",
    key: "key",
    align: "center",
    width: "80px",
  },
  {
    title: "订单单号",
    dataIndex: "documentNo",
    key: "documentNo",
    align: "center",
  },
  {
    title: "销售组织",
    dataIndex: "csalecorpid_dictText",
    key: "csalecorpid_dictText",
    align: "center",
  },
  {
    title: "业务员",
    dataIndex: "salesMan_dictText",
    key: "salesMan_dictText",
    align: "center",
  },
  {
    title: "客户",
    dataIndex: "clientId_dictText",
    key: "clientId_dictText",
    align: "center",
  },
  {
    title: "币种",
    dataIndex: "currency",
    key: "currency",
    align: "center",
  },
  {
    title: "是否赠品",
    dataIndex: "giveaway_dictText",
    key: "giveaway_dictText",
    align: "center",
  },
  {
    title: "订单日期",
    dataIndex: "documentDate",
    key: "documentDate",
    align: "center",
  },
  {
    title: "业务流程",
    dataIndex: "cbiztype_dictText",
    key: "cbiztype_dictText",
    align: "center",
  },
  {
    title: "库存组织",
    dataIndex: "cwarehouseid_dictText",
    key: "cwarehouseid_dictText",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "options",
    key: "options",
    align: "center",
    scopedSlots: { customRender: "options" },
  },
];

const listColumns = [
  {
    title: "序号",
    dataIndex: "key",
    key: "key",
    align: "center",
    width: "80px",
  },
  {
    title: "存货编码",
    dataIndex: "inventoryNo",
    key: "inventoryNo",
    align: "center",
  },
  {
    title: "存货名称",
    dataIndex: "inventoryName",
    key: "inventoryName",
    align: "center",
  },
  {
    title: "规格型号",
    dataIndex: "specifications",
    key: "specifications",
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "unit",
    key: "unit",
    align: "center",
  },
  {
    title: "辅助单位",
    dataIndex: "unitMeasurement",
    key: "unitMeasurement",
    align: "center",
  },
  {
    title: "数量",
    dataIndex: "quantity",
    key: "quantity",
    align: "center",
  },

  // {
  //   title: "单价原币",
  //   dataIndex: "unitPriceOriginalCurrency",
  //   key: "unitPriceOriginalCurrency",
  //   align: "center",
  // },
  // {
  //   title: "金额原币",
  //   dataIndex: "amountOfOriginalCurrency",
  //   key: "amountOfOriginalCurrency",
  //   align: "center",
  // },

  {
    title: "单价",
    dataIndex: "unitPrice",
    key: "unitPrice",
    align: "center",
  },
  {
    title: "金额",
    dataIndex: "money",
    key: "money",
    align: "center",
  },
  {
    title: "交货日期",
    dataIndex: "deliveryDate",
    key: "deliveryDate",
    align: "center",
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "options",
    key: "options",
    align: "center",
    scopedSlots: { customRender: "options" },
  },
];

export default {
  data() {
    return {
      visible: false,
      searchForm: {
        salesDepartment: "", // 销售部门
        deptId: "", // 销售部门Id
        rangeDate: null, // 日期范围
        startTime: "", // 开始日期
        endTime: "", // 结束日期
      },
      saleDepartmentList: [], // 销售部门
      ClientList: [], // 客户列表

      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 15 },
      },

      columns,
      dataSource: [],
      orderSelectedRowKeys: [],

      listColumns,
      listDataSource: [],
      listSelectedRowKeys: [], // 列表选择

      pagination: {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ["5"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      },
      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      },
      SelectData: [], // 选中的值

      goodsList: [], // 物品列表

      Form: {
        requisitionNo: "", // 订单号
        applicationDept: "", // 销售部门
        applicationDeptId: "", // 销售部门Id
        clientId: "", // 客户
        client: "", // 客户名称
        giveaway: "", // 是否赠品
        giveawayId: "", // 是否赠品
        goodsList: [], // 物品列表
      },
    };
  },
  mounted() {
    this.getSaleDepartmentList();
    this.getSaleOrderList();
  },
  methods: {
    // ----------- 获取销售订单列表 --------------
    getSaleOrderList(queryPath = "?pageNo=1&pageSize=5&status=审核通过") {
      comHttp.getSaleOrderList(queryPath).then((res) => {
        console.log("获取销售列表", res);
        this.dataSource = [];
        const pagination = { ...this.pagination };
        pagination.total = res.result.total;
        pagination.pageSize = res.result.size;
        this.pagination = pagination;

        this.dataSource = res.result.records;
        for (let i = 0; i < this.dataSource.length; i++) {
          this.dataSource[i].key = (res.result.current - 1) * 5 + i + 1;
        }
      });
    },

    // ----------- 获取销售部门列表 --------------
    getSaleDepartmentList() {
      this.saleDepartmentList = [];
      comHttp.getSaleDepartment().then((res) => {
        console.log(res);
        for (let i = 0; i < res.result.length; i++) {
          let data = {
            value: res.result[i].value,
            title: res.result[i].title,
          };
          this.saleDepartmentList.push(data);
        }
      });
    },

    // 部门按钮触发
    DepartmentChange(value, options) {
      this.searchForm.deptId = options.key;
    },

    // 时间段
    getRangeTime(date, dateString) {
      this.searchForm.startTime = dateString[0];
      this.searchForm.endTime = dateString[1];
    },

    // 列表选择
    listSelectChange(selectedRowKeys, selectedRows) {
      this.listSelectedRowKeys = selectedRowKeys;
      console.log(selectedRows);
      this.Form.goodsList = selectedRows;
    },

    // 物品选择
    orderSelectChange(selectedRowKeys, selectedRows) {
      this.orderSelectedRowKeys = selectedRowKeys;

      this.Form = selectedRows[0];
      this.Form[`goodsList`] = [];
      this.getSaleGoodsById(selectedRows[0].id);

      // {
      //   requisitionNo: selectedRows[0].documentNo, // 申请单号 作为原单号
      //   applicationDept: selectedRows[0].deptId_dictText, // 申请部门
      //   applicationDeptId: selectedRows[0].deptId, // 销售部门Id
      //   clientId: selectedRows[0].clientId, // 客户
      //   client: selectedRows[0].clientId_dictText, // 客户
      //   giveaway: selectedRows[0].giveaway_dictText, // 是否赠品
      //   giveawayId: selectedRows[0].giveaway, // 是否赠品

      // };
    },

    // 通过销售订单单号ID,查询物品信息
    getSaleGoodsById(id) {
      comHttp.getSaleGoodsByOrderId("?otherId=" + id).then((res) => {
        this.listDataSource = res.result.list;
        this.Form.goodsList = res.result.list;
        for (let i = 0; i < this.Form.goodsList.length; i++) {
          this.Form.goodsList[i].key = i + 1;
        }
      });
    },

    // ----------- 重置 ------------------
    // 对话框取消
    handleCancel() {
      this.Reset();
      this.visible = false;
    },
    // 重置
    Reset() {
      this.searchForm = {
        salesDepartment: "", // 销售部门
        deptId: "", // 销售部门Id
        rangeDate: null, // 日期范围
        startTime: "", // 开始日期
        endTime: "", // 结束日期
      }; // 重置查询条件

      this.resetPagination(); // 重置分页情况
      this.getSaleOrderList(); // 重置销售订单
      this.listDataSource = []; // 重置物品数据
      this.listSelectedRowKeys = []; // 重置选择框中选中的值
      this.orderSelectedRowKeys = [];
    },

    // 重置当前页码及页码参数
    resetPagination() {
      this.pagination = {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      };
      //查询参数
      this.queryParam = {
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      };
    },

    // ----------- 查询 ------------------
    // 查询
    Search() {
      let queryPath = this.getQueryPath();
      this.getSaleOrderList(queryPath);
      console.log("查询条件为:::", queryPath);
    },
    // 分页函数
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      let queryPath = this.getQueryPath();
      this.getSaleOrderList(queryPath);
    },

    // 获取全局查询条件
    getQueryPath() {
      console.log(this.searchForm);
      let queryPath =
        "?pageNo=" +
        this.queryParam.page +
        "&pageSize=5" +
        "&beginDate=" +
        this.searchForm.startTime +
        "&endDate=" +
        this.searchForm.endTime +
        "&deptId=" +
        this.searchForm.deptId +
        "&status=审核通过";
      return queryPath; // 返回的查询条件
    },

    // 打开对话框
    showModal() {
      this.visible = true;
    },
    // 对话框提交
    handleOk() {
      this.$emit("select-data", this.Form);
      this.visible = false;
    },
  },
};
</script>

<style>
</style>